<template>
  <div class=" grid grid-cols-2 gap-8  w-4/5 mx-auto pb-3 pt-10">
    <div v-for="post in posts" :key="post.id" @click="BlogDetail(post.path)" v-move
      class="flex flex-col justify-between items-start  bg-purple-900/40 backdrop-blur-md rounded-xl overflow-hidden border border-white/20 shadow-lg hover:border-white/40 hover:transform  transition-all hover:cursor-pointer">
      <div class="top w-full h-64 overflow-hidden relative">
        <NuxtImg :src="post.image" :alt="post.alt" preload class="w-full h-full object-cover "></NuxtImg>
        <div class="gradient-overlay absolute inset-0 bg-gradient-to-t from-purple-900/60 to-transparent"></div>
      </div>
      <div class="bottom flex flex-col justify-between p-4">
        <NuxtTime :datetime="post.date" class="text-[#fff] text-sm" />
        <h2 class="text-[#fff] text-2xl font-bold">{{ post.title }}</h2>
        <p class="text-[#fff] mt-2 line-clamp-3">{{ post.description }}</p>
        <div class="mt-3 flex gap-2">
          <span v-for="tag in post.tags" class="bg-purple-900/40  text-[#fff] text-sm px-3 py-1 rounded-full">#{{ tag
            }}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import type { Directive } from 'vue'
useHead({
  title: 'blog'
})
const { data: posts } = await useAsyncData('blog', () => queryCollection('blog').order('date', 'DESC').all())
const BlogDetail = async (path: string) => {
  await navigateTo(path)
}
const vMove: Directive = ((el, binding) => {
  el.addEventListener('mousemove', (e: MouseEvent) => {
    const rect = el.getBoundingClientRect()
    const x = e.clientX - rect.left
    const y = e.clientY - rect.top

    // 计算鼠标位置相对于卡片中心的偏移
    const centerX = rect.width / 2
    const centerY = rect.height / 2
    const rotateX = (centerY - y) / 20  // 垂直方向的旋转
    const rotateY = (x - centerX) / 40  // 水平方向的旋转，增加除数使角度更小

    // 应用3D变换
    el.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`
  })

  // 鼠标离开时重置变换
  el.addEventListener('mouseleave', () => {
    el.style.transform = 'perspective(1000px) rotateX(0) rotateY(0)'
  })
})

</script>
<style scoped>
.title {
  cursor: pointer;
}

.grid>div {
  transition: transform 0.2s ease-out;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}
</style>
